<template>
  <div>
    <el-dialog
      :title="titName"
      :visible="dialogVisible"
      width="30%"
      @close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="型号名称" prop="name">
          <el-input v-model="form.name" maxlength="10" show-word-limit placeholder="请输入" />
        </el-form-item>
        <el-form-item label="型号编码" prop="model">
          <el-input v-model="form.model" maxlength="15" show-word-limit placeholder="请输入(限制数字，字母，中划线，下划线)" />
        </el-form-item>
        <el-form-item label="货道行数" prop="vmRow">
          <template>
            <el-input-number v-model="form.vmRow" controls-position="right" :min="1" :max="10" placeholder="请输入" />
          </template>
        </el-form-item>
        <el-form-item label="货道列数" prop="vmCol">
          <template>
            <el-input-number v-model="form.vmCol" controls-position="right" :min="1" :max="10" placeholder="请输入" />
          </template>
        </el-form-item>
        <el-form-item label="货道容量" prop="channelMaxCapacity">
          <template>
            <el-input-number v-model="form.channelMaxCapacity" controls-position="right" placeholder="请输入" :min="1" :max="10" />
          </template>
        </el-form-item>
        <!-- 设备图片 -->
        <el-form-item label="设备图片" prop="image">
          <el-upload
            ref="imageForm"
            v-model="form.image"
            class="avatar-uploader"
            action=""
            list-type="picture-card"
            :limit="1"
            :show-file-list="true"
            :http-request="uploadSectionFile"
          >
            <img v-if="form.image" :src="form.image" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过100kb
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button v-loading="loading" type="primary" @click="amendSubit">确认</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
import { imageUploadAPI, addVendingTypeAPI, vendingAmendTypeAPI } from '@/api/vmType'
export default {
  name: '',
  components: {},
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        vmRow: 0,
        vmCol: 0,
        name: '',
        channelMaxCapacity: 0,
        model: '',
        image: ''
      },
      rules: {
        name: [{ required: true, message: '型号名称不能为空', trigger: 'blur' }],
        model: [{ required: true, message: '型号编码不能为空', trigger: 'blur' }],
        vmRow: [{ required: true, message: '货道行数不能为空', trigger: 'blur' }],
        vmCol: [{ required: true, message: '货道列数不能为空', trigger: 'blur' }],
        channelMaxCapacity: [{ required: true, message: '货道容量不能为空', trigger: 'blur' }],
        image: [{ required: true, message: '图片不能为空', trigger: 'blur' }]
      },
      loading: false
    }
  },
  computed: {
    titName() {
      return this.form.typeId ? '修改设备类型' : ' 新增设备类型'
    }
  },
  watch: {},
  created() {},
  methods: {
    handleClose() {
      this.$emit('update:dialogVisible', false)
      this.$refs.form.resetFields() // 每次重新打开弹窗 都会初始化里面的内容
      this.form = {}
    },
    // 新增和编辑售货机
    async amendSubit() {
      try {
        // 校验表单
        await this.$refs.form.validate()
        await this.$refs.imageForm.clearFiles()
        this.loading = true
        // 调用接口
        // await addVendingTypeAPI(this.form)
        // 判断是新增还是编辑
        this.form.typeId ? await vendingAmendTypeAPI(this.form.typeId, this.form) : await addVendingTypeAPI(this.form)
        // console.log(res)
        // 提示用户添加成功
        this.$message.success(`${this.form.typeId ? '编辑' : '新增'}成功  `)
        // 刷新页面
        this.$parent.getVendingTypeSearch()
        this.handleClose()// 关闭弹窗
      } catch (error) {
        if (error) {
          this.$message.error('该售货机类型正在使用')
        }
      } finally {
        this.loading = false
      }
    },
    // 图片上传
    async  uploadSectionFile({ file }) {
      const isJPGPNG = (file.type === 'image/jpeg' || file.type === 'image/png')
      const isLt100kb = file.size < (100 * 1024)

      if (!isJPGPNG) {
        this.$message.error('上传头像图片只能是 JPG 和 PNG 格式!')
        return isJPGPNG
      }
      if (!isLt100kb) {
        this.$message.error('上传头像图片大小不能超过 100kb!')
        return isLt100kb
      }
      // 图片上传
      const fromData = new FormData()
      fromData.append('fileName', file)
      const { data, status } = await imageUploadAPI(fromData)
      if (status !== 200) {
        return this.$message.error('上传失败')
      }
      this.form.image = data // 赋值
    }
    // handleAvatarSuccess(responce) {
    //   console.log(responce)
    //   // this.form.skuImage = URL.createObjectURL(file.url)
    //   this.form.image = responce
    // }

  }
}

</script>

<style scoped lang="scss">
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    // width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    // width: 178px;
    height: 178px;
    display: block;
  }
</style>
